86:I[903690,["/chat-static/_next/static/immutable/chunks/0t5koc6gywtjg.js","/chat-static/_next/static/immutable/chunks/2d5ra3e0435kr.js","/chat-static/_next/static/immutable/chunks/2v089ui-jko4d.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3fk4u2d6m9dj-.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1nag2_qii5d3b.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2d_66tvt_-qxg.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/3u537i82dxvjy.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/0xg0t_a536i1t.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/2-h-ggegl4qz4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2niei3xz3mph4.js","/chat-static/_next/static/immutable/chunks/3j1smr879e_f6.js","/chat-static/_next/static/immutable/chunks/1j4n_6xagcur9.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3b6uum5y_1nfz.js"],"ExplicitChatIdProvider"] 87:I[838238,["/chat-static/_next/static/immutable/chunks/0t5koc6gywtjg.js","/chat-static/_next/static/immutable/chunks/2d5ra3e0435kr.js","/chat-static/_next/static/immutable/chunks/2v089ui-jko4d.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3fk4u2d6m9dj-.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/1nag2_qii5d3b.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2d_66tvt_-qxg.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/3u537i82dxvjy.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/0xg0t_a536i1t.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/2-h-ggegl4qz4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2niei3xz3mph4.js","/chat-static/_next/static/immutable/chunks/3j1smr879e_f6.js","/chat-static/_next/static/immutable/chunks/1j4n_6xagcur9.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3b6uum5y_1nfz.js"],"SWRDataProvider"] 88:T2c01,[V0_FILE]css:file="app/custom-slider.css" isMerged="true" .custom-slider { @apply w-full h-1 bg-white/20; } .custom-slider .custom-slider-thumb { @apply w-0.5 h-4 bg-white/50; } .custom-slider .custom-slider-track { @apply h-full bg-white/50; } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import DynamicFrameLayout from "../components/DynamicFrameLayout" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import "./globals.css" import type React from "react" export const metadata = { title: "Dynamic Frame Layout", description: "A dynamic frame layout with videos", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 255, 255, 255; --background-rgb: 0, 0, 0; } body { color: rgb(var(--foreground-rgb)); background: rgb(var(--background-rgb)); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } [V0_FILE]typescriptreact:file="components/DynamicFrameLayout.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { FrameComponent } from "./FrameComponent" interface Frame { id: number video: string fileName: string defaultPos: { x: number; y: number; w: number; h: number } mediaSize: number } const initialFrames: Frame[] = [ // Row 1 { id: 1, video: "https://static.cdn-luma.com/files/57209d006969d76e/BoltCam.mp4", fileName: "BoltCam.mp4", defaultPos: { x: 0, y: 0, w: 3, h: 3 }, mediaSize: 1, }, { id: 2, video: "https://static.cdn-luma.com/files/57209d006969d76e/Elevator.mp4", fileName: "Elevator.mp4", defaultPos: { x: 3, y: 0, w: 3, h: 3 }, mediaSize: 1, }, { id: 3, video: "https://static.cdn-luma.com/files/57209d006969d76e/HandHeld.mp4", fileName: "HandHeld.mp4", defaultPos: { x: 6, y: 0, w: 3, h: 3 }, mediaSize: 1, }, { id: 4, video: "https://static.cdn-luma.com/files/57209d006969d76e/Orbit%20Left.mp4", fileName: "Orbit Left.mp4", defaultPos: { x: 9, y: 0, w: 3, h: 3 }, mediaSize: 1, }, // Row 2 { id: 5, video: "https://static.cdn-luma.com/files/57209d006969d76e/Pan%20Right.mp4", fileName: "Pan Right.mp4", defaultPos: { x: 0, y: 3, w: 3, h: 3 }, mediaSize: 1, }, { id: 6, video: "https://static.cdn-luma.com/files/57209d006969d76e/Pedstal%20Down.mp4", fileName: "Pedstal Down.mp4", defaultPos: { x: 3, y: 3, w: 3, h: 3 }, mediaSize: 1, }, { id: 7, video: "https://static.cdn-luma.com/files/57209d006969d76e/Pedstal%20Up.mp4", fileName: "Pedstal Up.mp4", defaultPos: { x: 6, y: 3, w: 3, h: 3 }, mediaSize: 1, }, { id: 8, video: "https://static.cdn-luma.com/files/57209d006969d76e/PlanLeft.mp4", fileName: "PlanLeft.mp4", defaultPos: { x: 9, y: 3, w: 3, h: 3 }, mediaSize: 1, }, // Row 3 { id: 9, video: "https://static.cdn-luma.com/files/57209d006969d76e/Pull%20Out.mp4", fileName: "Pull Out.mp4", defaultPos: { x: 0, y: 6, w: 3, h: 3 }, mediaSize: 1, }, { id: 10, video: "https://static.cdn-luma.com/files/57209d006969d76e/pushin.mp4", fileName: "pushin.mp4", defaultPos: { x: 3, y: 6, w: 3, h: 3 }, mediaSize: 1, }, { id: 11, video: "https://static.cdn-luma.com/files/57209d006969d76e/Roll%20Left.mp4", fileName: "Roll Left.mp4", defaultPos: { x: 6, y: 6, w: 3, h: 3 }, mediaSize: 1, }, { id: 12, video: "https://static.cdn-luma.com/files/57209d006969d76e/Static.mp4", fileName: "Static.mp4", defaultPos: { x: 9, y: 6, w: 3, h: 3 }, mediaSize: 1, }, // Row 4 { id: 13, video: "https://static.cdn-luma.com/files/57209d006969d76e/Tilt%20Down.mp4", fileName: "Tilt Down.mp4", defaultPos: { x: 0, y: 9, w: 3, h: 3 }, mediaSize: 1, }, { id: 14, video: "https://static.cdn-luma.com/files/57209d006969d76e/Tilt%20Up.mp4", fileName: "Tilt Up.mp4", defaultPos: { x: 3, y: 9, w: 3, h: 3 }, mediaSize: 1, }, { id: 15, video: "https://static.cdn-luma.com/files/57209d006969d76e/Zoom%20In.mp4", fileName: "Zoom In.mp4", defaultPos: { x: 6, y: 9, w: 3, h: 3 }, mediaSize: 1, }, { id: 16, video: "https://static.cdn-luma.com/files/57209d006969d76e/Zoom%20Out.mp4", fileName: "Zoom Out.mp4", defaultPos: { x: 9, y: 9, w: 3, h: 3 }, mediaSize: 1, }, ] export default function DynamicFrameLayout() { const [frames] = useState(initialFrames) const [hovered, setHovered] = useState<{ row: number; col: number } | null>(null) const [hoverSize] = useState(5) // Slightly reduced for 4x4 grid const [gapSize] = useState(2) // Small gap between videos const getRowSizes = () => { if (hovered === null) { return "1fr 1fr 1fr 1fr" // Equal sizes for 4 rows } const { row } = hovered const nonHoveredSize = (12 - hoverSize) / 3 // Divide remaining space among 3 non-hovered rows return [0, 1, 2, 3].map((r) => (r === row ? `${hoverSize}fr` : `${nonHoveredSize}fr`)).join(" ") } const getColSizes = () => { if (hovered === null) { return "1fr 1fr 1fr 1fr" // Equal sizes for 4 columns } const { col } = hovered const nonHoveredSize = (12 - hoverSize) / 3 // Divide remaining space among 3 non-hovered columns return [0, 1, 2, 3].map((c) => (c === col ? `${hoverSize}fr` : `${nonHoveredSize}fr`)).join(" ") } const getTransformOrigin = (x: number, y: number) => { // Calculate transform origin based on position in 4x4 grid const vertical = y === 0 ? "top" : y === 3 ? "top" : y === 6 ? "bottom" : "bottom" const horizontal = x === 0 ? "left" : x === 3 ? "left" : x === 6 ? "right" : "right" return `${vertical} ${horizontal}` } return (

{frames.map((frame) => { const row = Math.floor(frame.defaultPos.y / 3) const col = Math.floor(frame.defaultPos.x / 3) const transformOrigin = getTransformOrigin(frame.defaultPos.x, frame.defaultPos.y) return ( setHovered({ row, col })} onMouseLeave={() => setHovered(null)} > ) })}

) } [V0_FILE]typescriptreact:file="components/FrameComponent.tsx" isEdit="true" "use client" import { useEffect, useRef, useState } from "react" interface FrameComponentProps { video: string width: number | string height: number | string className?: string mediaSize: number isHovered: boolean fileName: string } export function FrameComponent({ video, width, height, className = "", mediaSize, isHovered, fileName, }: FrameComponentProps) { const videoRef = useRef(null) const [opacity, setOpacity] = useState(0) // Handle video playback based on hover state useEffect(() => { const videoElement = videoRef.current if (!videoElement) return if (isHovered) { // When hovering, reset to beginning, fade in, and play videoElement.currentTime = 0 setOpacity(1) // Play the video with error handling const playPromise = videoElement.play() if (playPromise !== undefined) { playPromise.catch((error) => { console.log("Video playback prevented by browser:", error) videoElement.muted = true videoElement.setAttribute("playsinline", "") videoElement.play().catch((e) => console.log("Still couldn't play:", e)) }) } } else { // When not hovering, immediately fade out and pause setOpacity(0) // Use a timeout to pause after fade out completes const pauseTimeout = setTimeout(() => { videoElement.pause() }, 500) // Match the fade duration return () => clearTimeout(pauseTimeout) } }, [isHovered]) // Extract camera name from filename const cameraName = fileName.replace(".mp4", "") return (

{/* Camera name overlay (always visible when not hovering) */}

{cameraName}

{/* Label in top-left corner of each tile (only visible when hovering) */}

{cameraName}

{/* Video (fades in/out) */}

) } 7c:["$","$L86",null,{"chatId":"1G8qOjiC4Nb","children":["$","$L87",null,{"data":{"@\"active-block\",\"1G8qOjiC4Nb\",":{"id":"b_duoZQArt8cN","messageId":"nPgD8bFp19lzndawdQCcTtyDJi7C1ORc","source":"$88","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"DynamicFrameLayout","type":"code-project","project":"DynamicFrameLayout"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"1G8qOjiC4Nb\",":false,"":null},"children":"$L89"}]}]

About

Tags

Share

About

Tags

Share

More from oeneco

More Templates Like This